<template>
  <base-chart :options="options" :height="height" />
</template>

<script setup>
import { computed } from 'vue'
import BaseChart from '@/base-ui/echart/base-chart.vue'

const props = defineProps({
  height: {
    type: String,
    default: '100%'
  },
  title: {
    type: String,
    default: ''
  },
  xLabels: {
    type: Array,
    default: () => []
  },
  maxTimevalues: {
    type: Array,
    default: () => []
  },
  minTimevalues: {
    type: Array,
    default: () => []
  },
  numValues: {
    type: Array,
    default: () => []
  }
})

const options = computed(() => {
  return {
    title: {
      text: '模型耗时时序图',
      left: 'center',
      textStyle: {
        fontWeight: 400,
        fontSize: 16
      }
    },
    backgroundColor: 'white',
    grid: {
      top: '30%',
      bottom: '10%'
    },
    // tooltip（提示框组件）
    tooltip: {
      //trigger(触发类型)，可选'item','axis','none'
      trigger: 'axis',
      axisPointer: {
        //指示器类型,可选'line','shadow','cross'
        type: 'shadow'
      }
      // formatter: '{a0}：{c0}ml<br/>{a1}：{c1}ml<br/>{a2}：{c2}℃'
    },
    legend: {
      top: '10%',
      right: '5%',
      name: ['最小耗时', '最大耗时'],
      textStyle: {
        // fontSize: 14,
        color: '#000'
      }
    },
    xAxis: {
      type: 'category',
      //axisTick 坐标轴刻度相关设置
      axisTick: {
        show: false
      },
      //axixLine 坐标轴轴线相关设置
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      data: props.xLabels,
      //axisLabel 坐标轴刻度标签的相关设置
      axisLabel: {
        // show: true,
        color: '#000',
        fontSize: 14
      }
    },
    yAxis: [
      {
        name: '耗时',
        type: 'value',
        axisLabel: {
          show: true,
          color: '#000',
          fontSize: 14,
          formatter: '{value}'
        },
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        axisTick: {
          // show: false
        }
      }
      // {
      //   name: '调用次数',
      //   type: 'value',
      //   position: 'right',
      //   axisLabel: {
      //     show: true,
      //     color: '#000',
      //     fontSize: 14,
      //     formatter: '{value}'
      //   },
      //   splitLine: {
      //     show: false
      //   },
      //   axisLine: {
      //     show: true,
      //     lineStyle: {
      //       color: '#000'
      //     }
      //   },
      //   axisTick: {
      //     // show: false
      //   }
      // }
    ],
    series: [
      {
        name: '最大耗时',
        //type决定图表类型
        type: 'bar',
        data: props.maxTimevalues,
        barWidth: '20%',
        itemStyle: {
          color: '#70B603'
        }
      },
      {
        name: '最小耗时',
        //type决定图表类型
        type: 'bar',
        data: props.minTimevalues,
        barWidth: '20%',
        itemStyle: {
          color: '#0054DE'
        }
      }
      // {
      //   name: '调用次数',
      //   //type决定图表类型
      //   type: 'line',
      //   yAxisIndex: 1,
      //   data: props.numValues,
      //   itemStyle: {
      //     color: 'yellow'
      //   }
      // }
    ]
  }
})
</script>
